<template>
  <!-- <v-container> -->
  <v-container
    class="green lighten-2"
    style="position:fixed;top:0px;bottom:0px;left:0px;rigth:0px;overflow:scroll;"
  >
    <!-- 返回按钮、题数 -->
    <v-row class="mt-n3">
      <v-col>
        <v-btn :to="{name:'home'}" class="mx-2" elevation="0" fab outlined x-small color="white">
          <v-icon color="white">mdi-keyboard-backspace</v-icon>
        </v-btn>
      </v-col>
      <v-col>
        <h3 class="d-flex justify-center">爱 心 公 益</h3>
      </v-col>
      <v-col></v-col>
    </v-row>
    <v-row>
      <span class="white--text font-weight-bold mt-4 ml-3">可用绿色积分：{{score}}</span>
      <span class="white--text font-weight-bold" style="position:relative;top:15px;left:80px;">
        查看爱心记录
        <v-icon class="pb-1" color="white">keyboard_arrow_right</v-icon>
      </span>
    </v-row>

    <br />
    <v-row dense>
      <v-col>
        <router-link :to="{name:'CheckLove'}" style="text-decoration:none">
        <v-card flat>
          <v-img
            src="../assets/绿色公益助力.jpg"
            gradient="to bottom, rgba(0,0,0,0), rgba(0,0,0,.7)"
            height="200px"
            contain
          >
            <div style="position:relative;top:140px;left:10px;width:200px;" class="white">
              <v-progress-linear v-model="valueDeterminate1" color="red"></v-progress-linear>
            </div>
            <span style="position:absolute;top:130px;right:5px;color:white;">{{score1}}/100000</span>
            <span style="position:relative;top:150px;left:10px;color:white;">绿色公益助力</span>
            <span style="position:relative;top:150px;left:40px;display:inline-block;width:120px;">
              <v-select v-model="select" :items="items" dense outlined dark></v-select>
            </span>
            <span style="position:relative;top:150px;left:55px;">
              <v-btn small outlined style="color:white;" rounded @click="retain()">捐赠</v-btn>
            </span>
          </v-img>
        </v-card>
        </router-link>
      </v-col>

      <v-col>
        <v-card flat>
          <v-img
            src="../assets/关爱留守儿童.jpg"
            gradient="to bottom, rgba(0,0,0,0), rgba(0,0,0,.7)"
            height="200px"
            contain
          >
            <div style="position:relative;top:140px;left:10px;width:200px;" class="white">
              <v-progress-linear v-model="valueDeterminate2" color="red"></v-progress-linear>
            </div>
            <span style="position:absolute;top:130px;right:5px;color:white;">{{score2}}/100000</span>
            <span style="position:relative;top:150px;left:10px;color:white;">关爱留守儿童</span>
            <span style="position:relative;top:150px;left:40px;display:inline-block;width:120px;">
              <v-select v-model="select1" :items="items1" dense outlined dark></v-select>
            </span>
            <span style="position:relative;top:150px;left:55px;">
              <v-btn small outlined style="color:white;" rounded @click="retain1()">捐赠</v-btn>
            </span>
          </v-img>
        </v-card>
      </v-col>

      <v-col>
        <v-card flat>
          <v-img
            src="../assets/新建希望小学.jpg"
            gradient="to bottom, rgba(0,0,0,0), rgba(0,0,0,.7)"
            height="200px"
            contain
          >
            <div style="position:relative;top:140px;left:10px;width:200px;" class="white">
              <v-progress-linear v-model="valueDeterminate3" color="red"></v-progress-linear>
            </div>
            <span style="position:absolute;top:130px;right:5px;color:white;">{{score3}}/100000</span>
            <span style="position:relative;top:150px;left:10px;color:white;">新建希望小学</span>
            <span style="position:relative;top:150px;left:40px;display:inline-block;width:120px;">
              <v-select v-model="select2" :items="items2" dense outlined dark></v-select>
            </span>
            <span style="position:relative;top:150px;left:55px;">
              <v-btn small outlined style="color:white;" rounded @click="retain2()">捐赠</v-btn>
            </span>
          </v-img>
        </v-card>
      </v-col>

      <v-col>
        <v-card flat>
          <v-img
            src="../assets/母亲健康快车.jpg"
            gradient="to bottom, rgba(0,0,0,0), rgba(0,0,0,.7)"
            height="200px"
            contain
          >
            <div style="position:relative;top:140px;left:10px;width:200px;" class="white">
              <v-progress-linear v-model="valueDeterminate4" color="red"></v-progress-linear>
            </div>
            <span style="position:absolute;top:130px;right:5px;color:white;">{{score4}}/100000</span>
            <span style="position:relative;top:150px;left:10px;color:white;">母亲健康快车</span>
            <span style="position:relative;top:150px;left:40px;display:inline-block;width:120px;">
              <v-select v-model="select3" :items="items3" dense outlined dark></v-select>
            </span>
            <span style="position:relative;top:150px;left:55px;">
              <v-btn small outlined style="color:white;" rounded @click="retain3()">捐赠</v-btn>
            </span>
          </v-img>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      score: 200,
      score1: 50000,
      score2: 38000,
      score3: 26000,
      score4: 12000,
      valueDeterminate1: 50,
      valueDeterminate2: 38,
      valueDeterminate3: 26,
      valueDeterminate4: 12,
      select: "10积分",
      select1: "10积分",
      select2: "10积分",
      select3: "10积分",
      items: ["10积分", "20积分", "50积分", "100积分", "自定义"],
      items1: ["10积分", "20积分", "50积分", "100积分", "自定义"],
      items2: ["10积分", "20积分", "50积分", "100积分", "自定义"],
      items3: ["10积分", "20积分", "50积分", "100积分", "自定义"]
    };
  },
  methods: {
    retain() {
      this.score -= 100;
      this.score1 += 100;
      this.valueDeterminate1 += 0.1;
    },
    retain1() {
      this.score -= 100;
      this.score2 += 100;
      this.valueDeterminate2 += 0.1;
    },
    retain2() {
      this.score -= 100;
      this.score3 += 100;
      this.valueDeterminate3 += 0.1;
    },
    retain3() {
      this.score -= 100;
      this.score4 += 100;
      this.valueDeterminate4 += 0.1;
    }
  }
};
</script>

<style scoped>
</style>